<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>仿遥控器按钮</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style type="text/css">
			.mycontent {
				width: 100px;
				height: 100px;
				position: relative;
				margin: 25px auto;
				right: 5px;
			}
			
			.quartercircle {
				position: absolute;
				width: 50px;
				height: 50px;
				-webkit-border-radius: 50px 0 0 0;
			}
			
			.divLeft {
				top: 25%;
				left: -10%;
				transform: rotate(-45deg);
				background-color: bisque;
				-ms-transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
			
			.divTop {
				top: -10%;
				left: 25%;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				background-color: burlywood;
			}
			
			.divRight {
				top: 25%;
				left: 60%;
				transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-webkit-transform: rotate(135deg);
				background-color: darkgray;
			}
			
			.divBottom {
				top: 60%;
				left: 25%;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				background-color: darkkhaki;
			}
			
			.circle {
				width: 50%;
				height: 50%;
				position: absolute;
				z-index: 100;
				top: 0%;
				left: 0%;
				bottom: 0;
				right: 0;
				margin: auto;
				border-radius: 100%;
				background-color: #889900;
				text-align: center;
			}
			
			.circle span {
				display: block;
				width: 100%;
				height: 100%;
				line-height: 50px;
				font-size: 24px;
			}
			
			.quartercircle a {
				position: absolute;
				width: 100%;
				height: 100%;
				background: #888888;
			}
			
			.quartercircle a:hover {
				background: #8BFF7C;
			}
		</style>

	</head>

	<body>
		<div class="mycontent" style="">
			<div class="quartercircle divLeft" style="">
				<a href="#" style="background: url(../img/left.svg) no-repeat center;"></a>
			</div>
			<div class="quartercircle divTop" style="">
				<a href="#" style="background: url(../img/top.svg) no-repeat center;"></a>
			</div>
			<div class="quartercircle divRight" style="">
				<a href="#" style="background: url(../img/top.svg) no-repeat center;"></a>
			</div>
			<div class="quartercircle divBottom" style="">
				<a href="#" style="background: url(../img/top.svg) no-repeat center;"></a>
			</div>
			<div class="circle" style=""><span style="color: white;">OK</span></div>
		</div>
		<div class="tck">
			<div class="xqitem">桩号: <span class="xqcs">'+data[i].ZH+'</span></div>
			<div class="xqitem">施工开始时间: <span class="xqcs">'+data[i].SGKSSJ+'</span></div>
			<div class="xqitem">施工完成时间: <span class="xqcs">'+data[i].SGJSSJ+'</span></div>
			<div class="xqitem">总时长:<span class="xqcs">'+tempsc+'</span></div>
			<div class="xqitem">实际桩长: <span class="xqcs">'+data[i].SHIJIZC+'米</span> 设计桩长: <span class="xqcs">'+data[i].SHEJIZC+'米</span></div>
			<div class="xqitem">实际水泥用量: <span class="xqcs">'+data[i].SHIJIYL+'kg</span></div>
			<div class="xqitem">设计水泥用量: <span class="xqcs">'+data[i].SHEJIYL+'kg</span></div>
		</div>'
	</body>

</html>